<template>
  <div class="coupons">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>优惠卷管理</el-breadcrumb-item>
      <el-breadcrumb-item>优惠卷列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 查询新增操作 -->
    <Search @search="search" @add='add' :type="type"></Search>
    <!-- 表体部分 -->
    <div class="contain">
      <el-table
        :data="couponList"
        border
        style="width: 1520px">
        <el-table-column
          type="index"
          width="180">
        </el-table-column>
        <el-table-column
          prop="detail"
          label="详情"
          width="259">
        </el-table-column>
        <el-table-column
          prop="newMoney"
          label="现价"
          width="180">
        </el-table-column>
        <el-table-column
          prop="oldMoney"
          label="原价"
          width="180">
        </el-table-column>
        <el-table-column
          prop="effectiveTime"
          label="有效期限/天"
          width="180">
        </el-table-column>
        <el-table-column
          prop='title'
          label="优惠卷名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop='ctypeName'
          label="优惠卷类型"
          width="180">
        </el-table-column>
        <el-table-column
          label="操作"
          width="180">
          <template slot-scope="scoped">
            <el-button type="primary" size="small" @click="couponChange(scoped.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <!-- <Pagenation :params='params' :total='total' @handleSizeChange='handleSizeChange' @handleCurrentChange='handleCurrentChange'></Pagenation> -->
    <div class="pagenation">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pagenum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="params.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!-- 弹框 -->
    <!-- 修改用户弹框 -->
    <el-dialog
      title="修改优惠卷信息"
      :visible.sync="dialogEdit"
      width="45%">
      <el-form :model="coupon" label-width="130px" ref="formEdit">
        <el-form-item label="详情：">
          <el-input v-model="coupon.detail"></el-input>
        </el-form-item>
        <el-form-item label="现价：">
          <el-input v-model="coupon.newMoney"></el-input>
        </el-form-item>
          <el-form-item label="原价：">
            <el-input v-model="coupon.oldMoney"></el-input>
          </el-form-item>
          <el-form-item label="有效时间">
            <el-date-picker
              v-model="coupon.effectiveTime"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="优惠卷名称：">
            <el-input v-model="coupon.title" disabled></el-input>
          </el-form-item>
          <el-form-item label="优惠卷类型：">
            <el-input v-model="coupon.ctypeName" disabled></el-input>
          </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogEditMethod">取 消</el-button>
        <el-button type="primary" @click="dialogEditSure">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 删除用户弹框 -->
    <el-dialog
      title="删除优惠卷"
      :visible.sync="dialogDelete"
      width="30%">
      <span>你确定要删除该优惠卷吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogDelete = false">取 消</el-button>
        <el-button type="primary" @click="dialogDeleteMethod">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增优惠卷 -->
    <el-dialog
      title="添加优惠卷信息"
      :visible.sync="dialogAdd"
      width="45%">
      <el-form :model="newCoupon" label-width="130px" ref="formEdit">
        <el-form-item label="详情：">
          <el-input v-model="newCoupon.detail"></el-input>
        </el-form-item>
        <el-form-item label="现价：">
          <el-input v-model="newCoupon.newMoney"></el-input>
        </el-form-item>
          <el-form-item label="原价：">
            <el-input v-model="newCoupon.oldMoney"></el-input>
          </el-form-item>
          <el-form-item label="有效期">
            <el-input v-model="newCoupon.effectiveTime"></el-input>
          </el-form-item>
          <el-form-item label="优惠卷名称：">
            <el-input v-model="newCoupon.couponName"></el-input>
          </el-form-item>
          <el-form-item label="优惠卷类型">
            <el-select v-model="newCoupon.ctype" placeholder="选择优惠卷类型">
              <el-option label="周卡" value="1"></el-option>
              <el-option label="月卡" value="2"></el-option>
              <el-option label="次数卡" value="3"></el-option>
            </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAddMethod">取 消</el-button>
        <el-button type="primary" @click="dialogAddSure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Search from '../../components/search'
import request from '@/utils/request'

export default {
  name: 'Coupons',
  components: {
    Search
    // Pagenation
  },
  data () {
    return {
      couponList: [],
      params: {
        query: '',
        pagenum: 1,
        pagesize: 5
      },
      total: 0,
      dialogEdit: false,
      dialogDelete: false,
      coupon: {},
      newCoupon: {},
      dialogAdd: false,
      type: 3
    }
  },
  created () {
    this.getData()
  },
  methods: {
    async getData () {
      const { data: res } = await request.postJson('/getCoupon', {
        pageSize: this.pagesize,
        pageNum: this.pagenum
      })
      this.couponList = res.rows
      this.total = res.total
    },
    // 监听pagesize改变事件
    handleSizeChange (newsize) {
      this.pagesize = newsize
      this.getData()
    },
    // 监听页码值改变的事件
    handleCurrentChange (newpage) {
      this.pagenum = newpage
      this.getData()
    },
    // 修改用户信息
    couponChange (row) {
      this.coupon = row
      this.dialogEdit = true
    },
    dialogEditMethod () {
      this.dialogEdit = false
    },
    async dialogEditSure () {
      console.log(this.coupon)
      const { data: res } = await request.postJson('/updateCoupon', this.coupon)
      console.log(res)
      this.dialogEdit = false
    },
    dialogDeleteMethod () {
      this.dialogDelete = false
    },
    couponDelete (row) {
      this.coupon = row
      this.dialogDelete = true
      console.log(row)
    },
    async search (data) {
      const { data: res } = await request.postJson('/getCoupon', {
        title: data.title
      })
      console.log(res)
      this.couponList = res.rows
    },
    dialogAddMethod () {
      this.dialogAdd = false
    },
    async dialogAddSure () {
      const { data: res } = await request.postJson('/addCoupon', this.newCoupon)
      console.log(res)
      this.getData()
      this.dialogAdd = false
    },
    add (data) {
      this.dialogAdd = data
    }
  }
}
</script>

<style scoped lang='scss'>

</style>
